<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta content="telephone=no" name="format-detection" />
  <title>2018临考押题卷</title>
  <meta itemprop="name" content="谁说人算不如天算？快来和我一起预测押题疯狂提分！" />
  <meta itemprop="image" content="/img/ygshare.jpg" />
  <meta name="description" itemprop="description" content="《高考命题预测与题——2018临考押题卷》首发预售，火热上线！" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/tg/pay_success.css">
  <% include ../component/_common_tongji.html %>
    <style>
      [v-cloak] {
        display: none;
      }

      #show {
        display: none;
      }
    </style>
    <script>
      window.onload = function () {
        var compa = document.querySelector('#show');
        if (compa) {
          compa.style.display = 'block';
        }
      }
      // 如果没有token就去登录页登录
      var token = window.localStorage.getItem('token');
      if (!token) {
        if (location.search != "") {
          location.replace('/tg' + location.search + "&o=share");
        } else {
          location.replace('/tg?o=share');
        }
      }
      var scale = 1 / devicePixelRatio;
      document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</head>

<body>
  <div id="app">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div class="content" v-cloak>
      <div class="top">
        <div class="topLeft"></div>
        <div class="topRight"></div>
        <img src="/img/ygsuccess01.jpg" alt="" class="topImg">
        <p class="success">
          <img src="/img/tg04.png" alt="">恭喜您支付成功
        </p>
        <p class="time">距离团购结束&nbsp;
          <span>{{day}}</span>
          <span>天</span>
          <span>{{hours}}</span>
          <span>时</span>
          <span>{{minute}}</span>
          <span>分</span>
        </p>
        <p class="line">再邀请{{moreNum}}人即可团购成功</p>
        <div class="topFooter">
          <div class="topFooterLeft">
            <img :src="bossInfo.avatar_url" alt="">
            <span class="boss">团长</span>
            <span>{{bossInfo.realname}}</span>
          </div>
          <div class="topFooterRight">
            <span>{{bossInfo.create_time}}</span>
            <span>团长</span>
          </div>
        </div>
        <div class="topFooter">
          <div class="topFooterLeft">
            <img :src="personOne.avatar_url" alt="">
            <span>{{personOne.realname}}</span>
          </div>
          <div class="topFooterRight">
            <span>{{personOne.create_time}}</span>
            <span>{{personOne.joinTg}}</span>
          </div>
        </div>
        <div class="topFooter">
          <div class="topFooterLeft">
            <img src="/img/tg05.png" alt="">
            <span>团员002</span>
          </div>
          <div class="topFooterRight">
            <span>尚未加入团购</span>
          </div>
        </div>
        <div class="borderBom"></div>
        <p class="warn">
          <img src="/img/tg01 (1).jpg" alt=""> 拼团不成功系统原路退费</p>
      </div>
      <footer>
        <a href="/tg/check" class="check">查询订单</a>
        <a href="javascript:;" class="btn" @click="handleShare">邀请好友参团</a>
      </footer>
      <div class="share" v-if="shareImg" @click="handleUnshare">
        <img src="/img/share.png" alt="">
      </div>
    </div>
  </div>
  <script src="https://sfile.tl100.com/js/libs/vue.min.js"></script>
  <script src="https://sfile.tl100.com/js/libs/moment.min.js"></script>
  <script src="https://sfile.tl100.com/js/libs/axios.min.js"></script>
  <script src="/js/api.js"></script>
  <script src="/js/wx.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        invitation_code: '',
        bossInfo: {
          realname: '',
          create_time: '',
          avatar_url: ''
        },
        personOne: {
          realname: '团员001',
          create_time: '',
          avatar_url: '/img/tg05.png',
          joinTg: '尚未加入团购'
        },
        day: '00',
        hours: '00',
        minute: '00',
        moreNum: '1',
        shareImg: false
      },
      mounted: function () {
        this.getUserInfo();
        // 获取登录页传过来的邀请码
        <% if (invitation_code != '') {%>
          this.invitation_code = "<%= invitation_code %>";
        <%}%>
          wxObj({
            shareUrl: "https://m.tl100.com/tg?invitation_code=" + this.invitation_code,
            title: '谁说人算不如天算？快来和我一起预测押题疯狂提分！',
            desc: '《高考命题预测与题——2018临考押题卷》首发预售，火热上线！',
            link: '&',
            imgUrl: 'img/ygshare.jpg'
          });
      },
      methods: {
        getUserInfo() {
          var vm = this;
          api.post('/api/pre_buy_book/getFinishGroupPurchaseInfo', {
            token: localStorage.getItem('token')
          }).then(function (res) {
            // 如果res_code=0说明不是团购，那就直接跳转查询页查询信息
            if (res.data.res_code == 0) {
              location.replace("/tg/check");
              return;
            }
            if (res.data.res_code < 0) {
              localStorage.removeItem("token");
              setLog('/api/pre_buy_book/getFinishGroupPurchaseInfo:fail', JSON.stringify(res.data));
              return;
            }
            if (res.data.res_code == 1) {
              var res_data = res.data.msg;
              // 团长信息
              vm.invitation_code = res_data.my_invitation_code;
              vm.bossInfo.realname = res_data.groups_info[0].nickname;
              vm.bossInfo.create_time = moment(res_data.groups_info[0].create_time).format('YYYY-MM-DD HH:mm');
              vm.bossInfo.avatar_url = res_data.groups_info[0].avatar_url;
              vm.moreNum = (3 - res_data.groups_info[0].member_info.length);
              // 当前团的倒计时
              var now = new Date();
              var endDate = new Date(res_data.groups_info[0].create_time);
              var leftTime = endDate.getTime() + (7 * 24 * 3600 * 1000) - now.getTime();
              vm.day = parseInt(leftTime / 86400 / 1000) <= 0 ? 0 : parseInt(leftTime / 86400 / 1000);
              vm.hours = parseInt(leftTime / 3600 / 1000 % 24) <= 0 ? 0 : parseInt(leftTime / 3600 / 1000 % 24);
              vm.minute = parseInt(leftTime / 60 / 1000 % 60) <= 0 ? 0 : parseInt(leftTime / 60 / 1000 % 60);
              if (res_data.groups_info[0].member_info.length == 2) {
                // 只有两个团员的时候团员信息
                vm.personOne.realname = res_data.groups_info[0].member_info[1].nickname;
                vm.personOne.create_time = moment(res_data.groups_info[0].member_info[1].create_time).format('YYYY-MM-DD HH:mm');
                vm.personOne.avatar_url = res_data.groups_info[0].member_info[1].avatar_url;
                vm.personOne.joinTg = '加入团购';
              }
              // 如果三人成团就跳转团购成功页
              if (res_data.groups_info[0].member_info.length == 3) {
                location.replace('/tg/tg_success?invitation_code=' + res_data.my_invitation_code);
              }
            }
          }).catch(function (error) {
            setLog('/api/pre_buy_book/getFinishGroupPurchaseInfo:catch', JSON.stringify(error));
          });
        },
        handleCheck() {
          // 订单查询
          location.href = '/tg/check?invitation_code=' + this.invitation_code;
        },
        handleShare() {
          this.shareImg = true;
        },
        handleUnshare() {
          this.shareImg = false;
        }
      }
    })


  </script>
</body>

</html>